<template>
  <div class="wrapper" ref='wrapper'>
    <div>
        <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  components: {
    
  },
  props:{
    probeType:{
      type:Number,
      default: 0
    },
    pullUpLoad:{
      type:Boolean,
      default:false
    }
  },
  data() {
      return {
          scroll:null
      }
  },
  mounted() {
      //1.创建scroll对象
       this.scroll = new BScroll(this.$refs.wrapper,{
           mouseWheel: true,
           click:true,
           probeType:this.probeType,
           pullUpLoad:this.pullUpLoad
       })

      //2.监听滚动位置
        if (this.probeType === 2 || this.probeType === 3) {
          this.scroll.on('scroll', position => {
            // console.log(position);
            this.$emit('scroll', position)
          })
        }

        //3.监听scroll滚动到底部
       if(this.pullUpLoad){
         this.scroll.on('pullingUp',()=>{
           //监听到
           this.$emit('pullingUp')
         })
       }

        
  },
  methods: {  //回到顶部
    scrollToTop(x,y,times=1000){
      console.log(this.scroll)
      this.scroll.scrollTo(x,y,times)
    },
    finishPullUp(){  //下拉事件结束
      this.scroll.finishPullUp()
    },
    refresh(){
      console.log('refresh')
      this.scroll &&  this.scroll.refresh()
    },
    getScrollY(){
      return this.scroll ? this.scroll.y:0
    },
    myScrollTo(y){
      this.scroll.scrollTo(0,y,0)
    }
  },
  
}
</script>

<style>
  .wrapper {
    overflow: hidden;
  }
</style>
